<!--黑客帝国背景-->
<template>
  <canvas id="canvas">

  </canvas>
</template>

<script>
  window.onload = function () {
    var canv = document.getElementById('canvas');
    var cw = document.documentElement.clientWidth;
    var ch = document.documentElement.clientHeight;
    canv.width = cw;
    canv.height = ch;
    var bc = 120;
    var bcIndex = 5;
    var shadowBlur = 2;
    var sbIndex = 0.4;
    var fh = 110;
    var ctx = canv.getContext('2d');
    var fontSize = 12;
    var columns = Math.ceil(cw / fontSize);//计算适合的列数
    var arr = [];
    var texts = "@#$%&?<>{}[]()~!ΑΒΓΔΕΖΗΘΙΚ∧ΜΝΞΟ∏Ρ∑ΤΥΦΧΨΩ0123456789".split("");//字符源
    for (var i = 0; i < columns; i++) {
      arr[i] = 1;
    }

    var shape = [];
    for (var i = 0; i < 80; i++) {
      var w = Math.random() * 2.2 + 1.2;
      var r = Math.floor(Math.random() * 170 + 80);
      var a = Math.random() * 361;
      var b = Math.floor(Math.random() * 2 + 1);
      var s = 0.8;
      shape.push({w: w, r: r, a: a, b: b, s: s});
    }

    function draw() {
      ctx.fillStyle = "rgba(0,0,0,0.08)";
      ctx.fillRect(0, 0, canv.width, canv.height);
      ctx.fillStyle = "#12ee46";
      ctx.font = fontSize + "px Arial";
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      for (var i = 0; i < arr.length; i++) {
        var text = texts[Math.floor(Math.random() * texts.length)];
        ctx.fillText(text, i * fontSize, arr[i] * fontSize);
        if (arr[i] * fontSize > ch || Math.random() > 0.95) {
          arr[i] = 0;
        }
        arr[i]++;
      }
      drawArc();
      drawText();


      window.onresize = function () {
        cw = document.documentElement.clientWidth;
        ch = document.documentElement.clientHeight;
        canv.width = cw;
        canv.height = ch;
        columns = Math.ceil(cw / fontSize);
        arr = [];
        for (var i = 0; i < columns; i++) {
          arr[i] = 1;
        }

      }
    }

    function drawArc() {
      var sl = shape.length;
      for (var i = 0; i < sl; i++) {
        var temp = shape[i];
        var x = cw / 2 + (temp.r * (Math.cos(temp.a * Math.PI / 180)));
        var y = ch / 2 + 40 + (temp.r * (Math.sin(temp.a * Math.PI / 180)));
        if (temp.b == 2) {
          temp.a += temp.s;
        } else {
          temp.a -= temp.s;
        }

        if (temp.a > 360) {
          temp.a = 0;
        }
        ctx.save();
        ctx.fillStyle = 'rgba(0,' + (255 - bc) + ',0,0.3)';
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x, y, temp.w, 0, 360 * Math.PI / 180, false);
        ctx.fill();
        ctx.closePath();
        ctx.restore();
      }
    }

    function drawText() {
      ctx.save();
      var title = "HACKER";
      var title2 = "EMPIRE";
      ctx.fillStyle = "rgba(0,24,0,1)";
      ctx.font = fh + "px Arial";
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fontWeight = 900;
      ctx.shadowOffsetY = 0;

      //字体阴影宽度变化
      shadowBlur += sbIndex;
      ctx.shadowBlur = shadowBlur;
      if (shadowBlur >= 14) {
        sbIndex *= -1
      } else if (shadowBlur <= 0) {
        sbIndex *= -1;
      }
      //字体阴影颜色变化
      bc += bcIndex;
      ctx.shadowColor = 'rgba(0,' + bc + ',0,1)';
      if (bc >= 255) {
        bcIndex *= -1;
      } else if (bc <= 45) {
        bcIndex *= -1;
      }

      ctx.fillText(title, cw / 2, ch / 2 + 20);
      ctx.font = 80 + "px Arial";
      ctx.fillText(title2, cw / 2, ch / 2 + 120);
      ctx.restore();
    }

    setInterval(draw, 90);


  }
  export default{
    name: 'bg'
  }
</script>

<style>
  #canvas {
    position: fixed;
    width: 100%;
    height: 100%;
  }
</style>
